<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="lib/vue-router-3.0.1.js" type="text/javascript" charset="utf-8"></script>



<div id="app">
  <router-link to="/login?id=乐视集团&&name=张总">登录</router-link>
  <router-link to="/register/12">注册</router-link>
  <transition appear mode="out-in">
    <router-view></router-view>
  </transition>
</div>

<script type="text/javascript">
  var login = {
    template: '<h1>登录组件 {{$route.query.id}}--{{$route.query.name}}</h1>',
    created() {
      console.log(this.$route, "this.$route")
    }
  }

  var register = {
    template: '<h1>注册组件---{{$route.params.id}}</h1>'
  }

  var routerobj = new VueRouter({
    mode: 'hash', // history | hash
    routes: [
      //			{path:'/',component:login},
      {
        path: '/',
        redirect: '/login' //redirect重定向
      }, {
        path: '/login',
        component: login
      },
      {
        path: '/register/:id',
        component: register
      }
    ],
    linkActiveClass: 'myrouter', //默认值可以通过路由的构造选项 linkActiveClass 来修改默认的类名
  })

  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {},
    router: routerobj,
    watch: {
      // '$route.path': function (newval, oldval) {
      '$route.path'(newval, oldval) {
        if (newval === '/register/12') {
          console.log("欢迎来到注册")
        } else if (newval === '/login') {
          console.log("欢迎来到登录")

        }
      }
    }
  })

</script>

<style type="text/css">
  /*.router-link-active {
    color: red;
    font-size: 24px;
  }*/

  .myrouter {
    color: red;
    font-size: 24px;
  }

  .v-enter,
  .v-leave-active {
    opacity: 0;
    transform: translateX(150px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 1s ease;
  }
</style>